@charset "UTF-8";

/*css 初始化 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
    margin: 0;
    padding: 0;
}
fieldset,
img,
input,
button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
ul,
ol {
    list-style: none;
}
input {
    padding-top: 0;
    padding-bottom: 0;
}
select,
input {
    vertical-align: middle;
}
/*select, input, textarea { font-size:12px; margin:0; }*/
/*多行文本框重置大小：不能*/
textarea {
    resize: none;
}
img {
    border: 0;
    vertical-align: middle;
}
table {
    border-collapse: collapse;
}
body {
    /*当你的：网页、css 编码是 utf8 时，某些情况下直接写：宋体、微软雅黑之类的中文字体名字，会出现不能识别导致字体设置失效的问题，如果把字体名字转成对应编码如：‘\5b8b\4f53’，就不会出现这个问题*/
    /* font:12px/150% Arial,Verdana,"\u5fae\u8f6f\u96c5\u9ed1"; */
    font: 12px/1.5 "Open Sans", sans-serif, Tahoma, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Roboto,
        Arial, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
    color: #000;
    background: #fff;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    height: 100%;
    width: 100%;
}

/*清除浮动*/
.clearfix:before,
.clearfix:after {
    /*内容为空*/
    content: "";
    /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #c81623;
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-decoration: none;
    color: #000;
    font-weight: 200;
    cursor: default;
}
h1 {
    font-size: 48px;
}
h2 {
    font-size: 36px;
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 20px;
}
h6 {
    font-size: 16px;
}
span,
label,
dt,
dd,
a {
    // font-weight: 200;
    // font-size: 14px;
}
p {
    // color: #666;
    // font-size: 14px;
    // font-weight: 300;
}
/*修改内容*/
s,
i,
em {
    font-style: normal;
    text-decoration: none;
}
.col-red {
    color: #c81623 !important;
}

.tr {
    text-align: right;
}

.tl {
    text-align: left;
}

.tc {
    text-align: center;
}

@mixin box-shadow($shadow...) {
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin border-radius($radius) {
    border-radius: $radius;
    -o-border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

@mixin transform($trans...) {
    -webkit-transform: $trans;
    -moz-transform: $trans;
    -ms-transform: $trans;
    -o-transform: $trans;
    transform: $trans;
}

@mixin transition($transition...) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

@mixin background-size($bgs...) {
    background-size: $bgs;
    -moz-background-size: $bgs;
    -webkit-background-size: $bgs;
    -o-background-size: $bgs;
}

@mixin opacity($opa) {
    opacity: $opa;
    filter: alpha(opacity=$opa * 100);
}

@mixin box-sizing($trans...) {
    box-sizing: $trans;
    -o-box-sizing: $trans;
    -ms-box-sizing: $trans;
    -moz-box-sizing: $trans;
    -webkit-box-sizing: $trans;
}

@mixin over-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin over-wrap() {
    word-break: break-all;
    word-wrap: break-word;
}

@mixin animate-action($animate...) {
    -webkit-animation: $animate;
    -o-animation: $animate;
    animation: $animate;
}

// 兼容
$Compatible: ("-webkit-", "-o-", "");
@mixin compatible($key, $val...) {
    -webkit-#{$key}: $val;
    -o-#{$key}: $val;
    #{$key}: $val;
}

$mainWidth: 1200px;

.container {
    width: $mainWidth;
    margin: 0 auto;
}
